<template>
	<view>
		<view class="wrap">
			<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
			<head-nav-bar :flag="true" :logo="logo" />
			<view class="searchs" @click="searchs">
				<u-search placeholder-color="rgba(255, 255, 255, 0.5)" :input-style="inputStyle" :show-action="false"
					color="#FFFFFF" height="80" bg-color="rgba(255, 255, 255, 0.2)" placeholder="搜索关键词或口令"
					@change="onInput" :clearabled="false">
				</u-search>
			</view>
		</view>
		<view class="tabs">
			<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
				:active-item-style="ActiveStyle" inactive-color="#fff" name="sort_name" :list="categoryList"
				:current="categoryCurrent" @change="changeCategory">
			</u-tabs>
		</view>
		<view>
			<cate :list="videoList" />
			<!-- 加载中提示 -->
			<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
				margin-bottom="10" />
			<view v-if="isEmpty" class="empty">
				<u-empty color="#A897D9" text="暂无数据" src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>

			</view>
		</view>
		<view @click="toTop" v-if="scrollTop>60">
			<xuanfu></xuanfu>
		</view>

	</view>

</template>
<script>
	import HeadNavBar from '@/components/headnavbar/index';
	import cate from '@/components/cate/videoList'
	import xuanfu from '@/components/xuanfu.vue'

	export default {
		components: {
			HeadNavBar,
			cate,
			xuanfu
		},

		data() {

			return {
				scrollTop: 0,
				logo: '',
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: 'linear-gradient(to right, #05FAFE, #EF44C4)'
				},
				// 关键词列表
				keywordList: [],
				// 分类列表
				categoryList: [],
				// 分类选中
				categoryCurrent: 0,
				// 分类ID
				sortId: 0,
				// 图集列表
				videoList: [],
				list: [],
				// 视频总数
				videoTotal: 0,
				// 页数
				videoPage: 1,
				// 每页条数
				videoSize: 10,
				// 加载状态
				status: 'loadmore',
				// 数据为空
				isEmpty: false,

				inputStyle: {
					backgroundColor: 'none'
				},
				keyword: '',
				types: 'recommend',

			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			})
			// 获取分类列表
			this.getVideos();
		},
		onShow() {
			this.$u.api.logo.getLogo({}).then(res => {
					this.logo = res.data.logo
				}),
				uni.hideLoading()
		},
		// mounted() {
		// 	uni.hideLoading()
		// },
		// 触底加载
		onReachBottom() {
			let allTotal = this.videoPage * this.videoSize;

			if (allTotal < this.videoTotal) {
				//当前条数小于总条数 则增加请求页数
				this.videoPage++;
				this.getVideoList(this.sortId);
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		methods: {
			onInput(e) {
				this.keyword = e
			},
			toTop() {
				if (this.scrollTop > 60) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			// 获取分类列表
			getVideos() {
				this.$u.api.video.getVideos().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.categoryList = res.data
					this.sortId = this.categoryList[this.categoryCurrent].id
					// 获取图集列表
					this.getVideoList(this.sortId)
				})
			},
			// 获取图集列表
			getVideoList(sortId) {
				this.$u.api.video.getVideoList({
					sortId: this.sortId,
					page: this.videoPage,
					size: this.videoSize,
					types: this.types
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}

					this.videoTotal = res.data.total;

					if (this.videoPage > 1) {
						this.videoList.push(...res.data.list);
					} else {
						this.videoList = res.data.list
					}
					// 数据为空
					if (this.videoList.length == 0) {
						this.isEmpty = true
					}

					if (this.videoSize > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}
				})
			},
			// 搜索
			searchs() {
				uni.navigateTo({
					url: '/pages/sys/video_bags/video_search'
				})
			},
			// 点击分类
			changeCategory(index) {
				this.isEmpty = false
				this.categoryCurrent = index;
				// 获取分类ID
				this.sortId = this.categoryList[this.categoryCurrent].id;
				this.types = this.categoryList[this.categoryCurrent].types
				// 重置加载状态
				this.status = "loading";
				// 重置图集数据
				this.videoList = [];
				// 重置页数
				this.videoPage = 1;

				this.getVideoList(this.sortId)
			},


		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 0 32rpx;
	}

	.tabs {
		margin: 24rpx 0;
		height: 60rpx;
		z-index: 999;
		/deep/ .u-tab-bar {
			margin-left: -8px !important;
		}
	}
	.waterfall {
		margin-right: 32rpx;
	}

	.data-list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0 35rpx 0;
	}

	.data-list-item {
		display: inline-block;
		margin-right: 20rpx;

		.box {
			display: flex;
			align-items: center;
			background: rgba(255, 121, 121, 0.48);
			padding: 0 18rpx 0 0;
			height: 40rpx;
			border-radius: 49rpx;
			font-size: 22rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;

			.image {
				width: 39rpx;
				height: 40rpx;
			}
		}
	}
</style>